<!-- src/layouts/BasicLayout.vue -->
<template>
    <a-layout class="layout">
        <a-layout-content v-if="params.isLoginPage" class="layout-content">
            <ConfigProvider :locale="locale">
                <router-view></router-view>
            </ConfigProvider>
        </a-layout-content>
        <a-layout-content v-else class="layout-content-menu">
            <Header/>
            <div class="content">
                <slider/>
                <div class="pd">
                    <ConfigProvider :locale="locale">
                        <router-view></router-view>
                    </ConfigProvider>
                </div>
            </div>
        </a-layout-content>
    </a-layout>
</template>

<script setup>
import {ref} from 'vue';
import {ConfigProvider} from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
const locale = ref(zhCN);
import slider from './slider/index.vue'
import Header from './header/index.vue'
import {watch, reactive} from 'vue';
import {useRoute} from 'vue-router';

const route = useRoute();
const params = reactive({
    isLoginPage: true
})
console.log(route,'route')
watch(() => route.path, (newPath) => {
    params.isLoginPage = newPath === '/login';
});
</script>
<style lang="less">
/* 布局组件样式 */
#app {
    height: 100%;
}

.layout {
    height: 100%;
}
.pageTitle{
    font-size: 18px;
    margin: 10px 10px 24px;
    //margin-bottom: 12px;
}
.contentPage {
    width: 100%;
    min-height: 100%;
    background: #ffffff;
    border-radius: 6px;
    padding: 12px;
}

.layout-content {
    height: 100%;
}

.layout-content-menu {
    height: 100%;
    overflow: hidden;
    .content {
        height: calc(100% - 50px);
        display: flex;
        margin-top: 1px;

        .pd {
            width: 100%;
            padding: 12px;
            overflow: auto;
        }
    }
}
.menu-slider::-webkit-scrollbar{
    display: none;
}
.menu-slider{
    width: 200px;
    height: 100%;
    background: #fff;
    overflow: auto!important;
}
.linkBtn{
    color: #1677ff;
    cursor: pointer;
    white-space: nowrap;
}
.btnText{
    height: 31px;
    line-height: 31px;
}
</style>
